var SearchForm = function () {
  var template = /* html */ `
    <div class="search-form" v-loading.fullscreen.lock="loading">
      <sys-common-search request-url="materialSelectFilter/getMaterialSelectData" :request-data="{type:8}" :search="search"
        :search-field="searchField" label-width="100px" input-width="180px">
        <template slot="prepend">
          <el-form-item label="制单日期">
            <el-date-picker v-model="search.startDate" style="width:229px;" value-format="timestamp" :editable="false"
              :picker-options="startDateOption"></el-date-picker>
            <span>-</span>
            <el-date-picker v-model="search.endDate" style="width:229px;" value-format="timestamp" :editable="false"
              :picker-options="endDateOption"></el-date-picker>
          </el-form-item>
        </template>
        <template slot="append">
          <el-form-item label="单据状态">
            <el-select clearable v-model="search.status" style="width:180px">
              <el-option v-for="status in statusList" :key="'status_'+status.value" :value="status.value" :label="status.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核人员">
            <el-cascader clearable filterable style="width:180px" :options="deptWorkshopList"
              v-model="search.deptWork" :props="{value:'id',label:'name'}" separator="-">
            </el-cascader>
          </el-form-item>
        </template>
      </sys-common-search>
    </div>
  `;

  return {
    mixins: [datePickerOptionsMixin('startDate', 'endDate')],

    props: {
      search: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        statusList: i18n.getDropDown('returnOrder.status', [0, 1, 2]),
        deptWorkshopList: [],
        searchField: ['materialName', 'model', 'color', 'colorDescription', 'providerName', 'materialDept', 'orderId',
          'companyOrderId', 'factoryNo', 'customerNo', 'providerNo'
        ]
      };
    },

    created: function () {
      this.setDeptWorkshopList();
    },

    methods: {
      setDeptWorkshopList: function () {
        this.loading = true;
        var self = this;
        DropdownUtil.getDeptWorkshopUserList().then(function (deptWorkshopList) {
          self.deptWorkshopList = deptWorkshopList;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      SysCommonSearch: SysCommonSearch
    },

    template: template
  };
}();
